<template>
  <div>

  <div class="course_video">
    <div class="left">
      <video :src="coursevideo[0].url"  controls="controls" height="470" width="800"></video>
      <el-row>
        <el-button class="zan" @click='zan'>{{button_value}}({{like_count}})</el-button>
<!--        <el-button class="ping">评论({{ping}})</el-button>-->
        <el-button class="addtrain"  @click="open">{{buttonvalue}}</el-button>
      </el-row>
      <el-tabs type="border-card" class="liebiao">
        <el-tab-pane v-for="item,index in coursevideo" >
          <span slot="label" > 第{{index+1}}个动作</span>
          <video :src="item.url" width="160px" height="130px"  ></video>
        </el-tab-pane>
      </el-tabs>
    </div>


    <div class="right"><course-jieshao></course-jieshao></div>

<!--    <div class="moment">-->
<!--      <p>课程评价</p>-->
<!--      <el-divider></el-divider>-->
<!--      <video-comment></video-comment>-->
<!--      <el-button class="tijiao">发表评论</el-button>-->
<!--      <p class="jingcai">精彩评论</p>-->
<!--      <el-divider></el-divider>-->
<!--    </div>-->



<!--    <div class="othercomment_container">-->
<!--      <other-comments></other-comments>-->
<!--      <other-comments></other-comments>-->
<!--      <other-comments></other-comments>-->
<!--      <other-comments></other-comments>-->
<!--    </div>-->

  </div>
    <div>
      <IndexCenterLink></IndexCenterLink>
      <IndexCenterFoot class="IndexCenterFoot"></IndexCenterFoot>
    </div>
  </div>

</template>

<script type = "text/javascript">
  import CourseComment from "./course/CourseComment"
  import OtherComments from "./course/OtherComments"
  import coursejieshao from "./course/coursejieshao"
  import IndexCenterFoot from "./IndexCenterFoot";
  import IndexCenterLink from "./IndexCenterLink";
  export default {
    name: "CourseDetail",
    data() {
      return {
        coursevideo:{},
        like_count:10,
        flg:true,
        ping:5,
        buttonvalue:"收藏课程",
        button_value:"点赞"
      }
    },
    components: { "video-comment": CourseComment, "other-comments": OtherComments,"course-jieshao":coursejieshao,"IndexCenterFoot":IndexCenterFoot,"IndexCenterLink":IndexCenterLink},
    created() {
      var this_ = this;
      console.log("sss",this_.$store.state.courseid)
      this_.$axios.get('http://127.0.0.1:8080/course/getcourseByclick', {
        params: {
          id: this_.$store.state.courseid,
        }
      })
        .then(function (response) {
          this_.coursevideo = response.data;
          console.log( this_.coursevideo);
        })
    },
    methods:{
      zan: function(){
        if(this.flg){
          this.like_count++;
          this.flg = false;
          this.button_value='已赞';
        }else{
          this.like_count--;
          this.flg = true;
          this.button_value='点赞';
        }
      },
      open() {
        if(this.buttonvalue=='取消收藏'){
          this.buttonvalue='收藏课程';
          this.$alert('已取消收藏！', '', {
            confirmButtonText: '确定',
          });
          // this_.$router.push("/PlanDetail")

        }else{
          this.buttonvalue='取消收藏';
          this.$alert('已加入收藏！', '', {
            confirmButtonText: '确定',
          });
        }
      },
    }
  }
</script>

<style scoped>
  .liebiao{
    margin-top: 20px;
  }
  .course_video{
    width: 1180px;
    height: 800px;
    /*background: #202023;*/
    margin:auto;
    margin-top: 20px;
  }
  .zan{
    width: 100px;
    height: 30px;
    line-height: 6px;
  }
  .ping{
    width: 100px;
    height: 30px;
    line-height: 6px;

  }
  .course_video .left{
    width: 68%;
    height: 500px;
    float: left;
    background: #f2f2f2;
  }
  .course_video .right{
    width: 31%;
    height: 800px;
    float: right;
    background: #f2f2f2;

    /*box-shadow: 0 0 1px #949182;*/
  }
  .left .addtrain{
    width: 100px;
    height: 40px;
    background: #ff7160;
    float: right;
    font-size: 16px;
    color: #343434;
    text-align: center;

  }
  .left .addtrain:hover{
    background: red;
    color: #202023;
  }
  .jingcai{
    margin-top: 30px;
  }
  .moment{
    width: 68%;
    float: left;
    /*background: #edeada;*/
    margin-top: 260px;
  }
  .tijiao{
    width: 80px;
    height: 30px;
    font-size: 14px;
    vertical-align:middle;
    text-align: center;
    line-height: 6px;
    /*text-align: center;*/
    /*justify-content: center;*/
    /*background: #ed0c1c;*/
    color: black;
    float: right;
    margin-bottom: 10px;

  }
  .moment p{
    margin-bottom: 5px;
  }
  .tijiao:hover{
    color: #d25145;
  }

  .othercomment_container{
    width: 68%;
    /*margin: auto;*/
    float: left;
  }

</style>



<!--根据courseshow的id来取得视频详情，所以渲染coursedetail时应该传course-basic的id-->
